<template>
    <div class="left-menu">
        <el-row>
            <!-- router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转-->
            <el-menu class="q-menu" :default-active="activeMenu" router background-color="#fff" text-color="#00e28b" active-text-color="#00e28b">
                <!-- 一级菜单 -->
                <el-submenu v-for="(item,index) in menuData" :index="'/'+item.path" :key="index">
                    <!-- 内容 -->
                    <template slot="title">
                        <i style="color:#00e28b;padding-right:10px" :class="item.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item v-for="(item1,index1) in item.children" @click="saveMenu('/'+item1.path)" :index="'/'+item1.path" :key="index1">
                        <!-- 内容 -->
                        <template slot="title">
                            <span slot="title">{{item1.name}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menuData:[
                {
                    icon:'iconfont icon-shouye',
                    name:'首页',
                    path:'index',
                    children:[
                        {
                            path:'admin/index',name:'统计数据',
                        }
                    ]
                },
                {
                    icon:'iconfont icon-yonghutouxiang',
                    name:'信息管理',
                    path:'user',
                    children:[
                        {
                            path:'admin/user',name:'用户列表'
                        },
                    ]
                },
                {
                    icon:'iconfont icon-shangpin',
                    name:'商品管理',
                    path:'goods',
                    children:[
                        {
                            path:'admin/goods',name:'商品列表'
                        }
                    ]
                },
                {
                    icon:'iconfont icon-dingdan',
                    name:'订单管理',
                    path:'order',
                    children:[
                        {
                            path:'admin/order',name:'订单列表'
                        }
                    ]
                },
                {
                    icon:'iconfont icon-shezhi',
                    name:'设置',
                    path:'set',
                    children:[
                        {
                            path:'admin/set',name:'轮播图管理'
                        }
                    ]
                },
            ],
            // 默认打开的菜单
            activeMenu:'',
        }
    },
    methods: {
        saveMenu(val){
            localStorage.setItem('by_menu',val)
        }
    },
    created() {
        // 加载导航菜单的时候,如果存在就用
        if(localStorage.getItem('by_menu')){
            this.activeMenu = localStorage.getItem('by_menu')
        }
    },
}
</script>
<style lang="less" scoped>
.left-menu{
    position: fixed;
    top: 71px;
    left: 0;
    min-height: 100%;
    background-color: #fff;
    z-index: 99;
    box-shadow: 1px 1px 5px #ccc;
    .q-menu {
        width: 179px;
        overflow: hidden;
    }
    // 去掉边框
    /deep/ .el-menu{
        border: 0;
    }
    // 右边下拉箭头的样式
    /deep/ .el-submenu__title i {
        color: #00e28b;
    }
    // 选中的背景色
    /deep/ .el-menu-item.is-active {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
}
</style>